import React, { createContext } from 'react'

let { Consumer: CountConsumer, Provider } = createContext()

class CounterProvider extends React.Component {

  constructor() {
    super();
    this.state = {
      num: 100
    }
  }

  increment = () => {

    this.setState((preState) => {
      return {
        num: preState.num += 1
      }
    })
  }

  decrement = () => {
    this.setState((preState) => {
      return {
        num: preState.num -= 1
      }
    })
  }

  render() {
    return (
      <Provider value={{
        num: this.state.num,
        increment: this.increment,
        decrement: this.decrement
      }}>
        {this.props.children}
      </Provider>
    )

  }
}

export {
  CountConsumer,
  CounterProvider
}
